<template>
  <div class="details">
    <div class="nav-bar-wrap">
      <van-nav-bar  title="预约会议" left-text="返回" right-text="完成" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>
    <div class="top"></div>
    <van-cell-group class="group">
      <van-field v-model="message" type="textarea" placeholder="请输入会议详情" rows="5" autosize>
        <span slot="icon" class="tips">200</span>
      </van-field>
    </van-cell-group>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { Icon, Cell, CellGroup, Toast, Field, NavBar } from 'vant'
import local from '../../service/local.service.js'
export default {
  data() {
    return {
      message: '',
      localData: {}
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [NavBar.name]: NavBar
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    },
    onClickRight(){
      this.localData.meetingDetail = this.message
      local.set('editData',this.localData)
      this.$router.push('appointment')
    },
    initData(){
      this.localData = local.get('editData') || ''
      if(this.localData.meetingDetail){
        this.message = this.localData.meetingDetail
      }
    }
  },
  mounted(){
    this.initData()
  }
}
</script>

<style scoped lang='less'>
.details {
  .tips{
    display: inline-block;
    position: absolute;
    bottom:0px;
    left: 0px;
    color: #9D9C9B;
    font-size: 10px;
  }
  .top {
    margin-top: 40px;
    height: 50px;
    background: #fff;
  }
  .bottom {
    height: 50px;
    background: #fff;
  }
  .group {
    border-top: 1px solid #fbfbfb;
    border-bottom: 1px solid #fbfbfb;
    position: relative;
  }
}
</style>